<template>
  <div>
    <div class="detail_container">
      <div class="detail_nav">
        <span>Bilibili</span>&nbsp;><span>会员购</span>&nbsp;>&nbsp;
        <span>{{ name }}</span>
      </div>
      <div class="detail_wrap">
        <div class="detail_wrap_img">
          <img :src="cover" alt="" width="100%" height="100%" />
        </div>
        <div class="detail_content">
          <div class="detail_content_title">{{ name }}</div>
          <div class="detail_content_time">
            <span class="time_title">时间：</span>
            <span class="time_num">{{ project_label }}</span>
          </div>
          <div class="detail_content_address">
            <span class="address_title">场馆：</span>
            <span class="address_name">{{ venue_info.name }}</span>
            <span class="address">{{ venue_info.address_detail }}</span>
            <span class="address_map">
              <span class="address_icon"></span>
              查看地图
            </span>
          </div>
          <div class="detail_content_select">
            <ul class="select_ul_one">
              <li class="li_one">场次：</li>
              <li class="li_two">
                <div
                  v-for="(screen, index) in screen_list"
                  :key="screen.id"
                  @click="switchSelect(index)"
                  :class="selectIndex === index ? 'active' : ''"
                >
                  {{ screen.name }}
                </div>
              </li>
            </ul>
            <ul class="select_ul_two">
              <li class="li_one">价格：</li>
              <li class="li_two">
                <div
                  v-for="(ticket, index) in ticket_list"
                  :key="ticket.id"
                  @click="switchPrice(index)"
                  :class="priceIndex === index ? 'active' : ''"
                >
                  ￥{{ ticket.price / 100 }}({{ ticket.desc }})
                </div>
                <!-- <div :class="isSale(tircket.sale_start) ? 'unable' : ''">
                  ￥50预售
                </div> -->
              </li>
            </ul>
            <ul class="select_ul_three">
              <li class="li_one">数量：</li>
              <li class="li_two">
                <div class="li_div">
                  <div class="div_one" @click="descNum">-</div>
                  <div class="div_two">{{ num }}</div>
                  <div class="div_three" @click="inscNum">+</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "VipShopDetails",
  props: ["detailId"],
  data() {
    return {
      cover: "",
      venue_info: {},
      screen_list: [],
      project_label: "",
      name: "",
      ticket_list: [],
      selectIndex: 0,
      priceIndex: 0,
      num: 1,
    };
  },
  mounted() {
    this.getDetailList();
  },
  methods: {
    async getDetailList() {
      const res = await axios({
        url: `/api/ticket/project/get?version=134&id=${this.detailId}`,
        method: "get",
      });
      const obj = res.data.data;
      this.cover = obj.cover;
      this.venue_info = obj.venue_info;
      this.screen_list = obj.screen_list;
      this.project_label = obj.project_label;
      this.name = obj.name;
      this.ticket_list = obj.screen_list[0].ticket_list;
    },

    switchSelect(index) {
      this.selectIndex = index;
    },
    switchPrice(index) {
      this.priceIndex = index;
    },
    inscNum() {
      this.num = this.num + 1;
    },
    descNum() {
      this.num = this.num - 1;
      if (this.num < 1) {
        this.num = 1;
      }
    },

    // 获取自定义时间时间戳
    getTime() {
      // const [year, time] = str.split(" ");
      // const [Y, M, D] = year.split("-");
      // const [h, m, s] = time.split(":");
      // console.log(Y, M, D, h, m, s);
      // const date = new Date();
      // date.setFullYear(Y);
      // date.setMonth(M - 1);
      // date.setDate(D);
      // date.setHours(h);
      // date.setMinutes(m);
      // date.setSeconds(s);
      // return date.setSeconds(s);
    },
  },
  // computed: {
  //   isSale(str) {
  //     const date = new Date();
  //     const saleTime = this.getTime(str);
  //     return saleTime >= date;
  //   },
  // },
};
</script>

<style lang="less" scoped>
.detail_container {
  margin-top: 60px;
  background-color: #fff;
  padding-bottom: 58px;
  .detail_nav {
    width: 1160px;
    margin: auto;
    background: #fff;
    padding: 10px;
    display: flex;
    align-items: center;
  }
  .detail_wrap {
    width: 1160px;
    margin: 0 auto;
    display: flex;
    .detail_wrap_img {
      width: 300px;
      height: 400px;
      margin-right: 20px;
      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 50%), 0 4px 8px 0 rgb(0 0 0 / 40%);
      border-radius: 4px;
      overflow: hidden;
    }
    .detail_content {
      width: 840px;
      .detail_content_title {
        font-size: 18px;
      }
      .detail_content_time {
        margin-top: 30px;
        .time_title {
          font-size: 14px;
          color: #99a2aa;
          line-height: 14px;
          margin-right: 15px;
        }
        .time_num {
          font-size: 14px;
          color: #222;
          line-height: 14px;
        }
      }
      .detail_content_address {
        padding-bottom: 8px;
        margin-top: 10px;
        align-items: center;
        display: flex;
        border-bottom: 1px dashed #e7ecf1;
        .address_title {
          line-height: 38px;
          font-size: 14px;
          color: #99a2aa;
          margin-right: 15px;
        }
        .address_name {
          font-size: 14px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          max-width: 430px;
        }
        .address {
          margin-right: 5px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-left: 10px;
          font-size: 12px;
          color: #99a2aa;
          line-height: 14px;
          max-width: 250px;
        }
        .address_map {
          cursor: pointer;
          font-size: 12px;
          color: #6d757a;
          line-height: 14px;
          display: flex;
          span {
            background-image: url("../img/address1.png");
            background-size: 100% 100%;
            margin-left: 15px;
            margin-right: 5px;
            display: inline-block;
            width: 15px;
            height: 15px;
            background-repeat: no-repeat;
          }
        }
      }
      .detail_content_select {
        width: 840px;
        .active {
          height: 38px;
          line-height: 38px;
          color: #f25d8e;
          border: 1px solid #f25d8e !important;
          box-shadow: inset 0 0 0 1px #f25d8e;
        }
        .active::before {
          display: inline-block;
          position: absolute;
          content: "";
          font-size: 0;
          line-height: 0;
          width: 6px;
          height: 4px;
          right: 1px;
          bottom: 3px;
          border: 1px solid #fff;
          border-width: 0 0 2px 2px;
          transform: rotate(-43deg);
          z-index: 10;
        }
        .active::after {
          position: absolute;
          content: "";
          font-size: 0;
          width: 0;
          height: 0;
          bottom: 0;
          right: 0;
          border-style: solid;
          border-width: 0 0 18px 18px;
          border-color: transparent transparent #f25d8e;
        }
        .unable {
          color: #b8c0cc;
          border-color: #e5e9ef;
          background-color: #f4f5f7;
          cursor: not-allowed !important;
        }
        .select_ul_one {
          margin-top: 14px;
          display: flex;
          .li_one {
            width: 42px;
            line-height: 38px;
            font-size: 14px;
            color: #99a2aa;
            margin-right: 15px;
          }
          .li_two {
            width: 780px;
            div {
              display: inline-block;
              position: relative;
              height: 38px;
              line-height: 38px;
              text-align: center;
              margin-right: 10px;
              margin-bottom: 10px;
              padding: 0 30px;
              border: 1px solid #ccd0d7;
              border-radius: 4px;
              -webkit-user-select: none;
              user-select: none;
              cursor: pointer;
            }
          }
        }
        .select_ul_two {
          margin-top: 14px;
          display: flex;
          .li_one {
            width: 42px;
            line-height: 38px;
            font-size: 14px;
            color: #99a2aa;
            margin-right: 15px;
            display: inline-block;
          }
          .li_two {
            width: 780px;
            div {
              display: inline-block;
              position: relative;
              height: 38px;
              line-height: 38px;
              text-align: center;
              margin-right: 10px;
              margin-bottom: 10px;
              padding: 0 30px;
              border: 1px solid #ccd0d7;
              border-radius: 4px;
              cursor: pointer;
              user-select: none; //是否允许用户选中文本
            }
          }
        }
        .select_ul_three {
          margin-top: 14px;
          display: flex;
          .li_one {
            width: 42px;
            line-height: 38px;
            font-size: 14px;
            color: #99a2aa;
            margin-right: 15px;
          }
          .li_two {
            .li_div {
              display: flex;
              align-items: center;
              height: 38px;
              border-radius: 3px;
              border: 1px solid #ccd0d7;
              width: 158px;
              line-height: 38px;
              .div_one {
                margin-left: 13px;
                font-size: 25px;
                font-weight: 700;
                cursor: pointer;
                color: #f25d8e;
              }
              .div_three {
                // margin-left: 13px;
                font-size: 25px;
                font-weight: 700;
                cursor: pointer;
                color: #f25d8e;
                margin-right: 13px;
              }
              .div_two {
                width: 102px;
                height: 16px;
                line-height: 16px;
                left: 16px;
                text-align: center;
              }
            }
          }
        }
      }
    }
  }
}
</style>
